<template>
	<view class="content">
		 
		<view class="rela-modul">
			<view class="head">
				<view class="left">
					<image class="img" src="../../../static/images/icon_money.png" mode="aspectFill"></image>
					<text class="text">追加合同金额</text>
				</view>
				<view class="right" @click="addMoney()" >
					<image class="img" src="../../../static/images/icon_pens.png"  mode="aspectFill"></image>
					<text class="text">追加金额</text>
				</view>
			</view>
			<view class="contact-list">
				<view class="item" v-for="(item, index) in list">
					<view class="left">
						<text class="name">追加金额:￥{{item.money}}</text>
						<text class="phone">提交时间:{{item.createTime}}</text>
						<text class="phone">追加日期:{{item.createTime}}</text>
						<text class="phone">备注:{{item.note}}</text>
					</view>
				</view>
				
			</view>
		</view>
		 
	</view>
</template>

<script>
	import api from '@/api/api.js';
	export default {
		data() {
			return {
				list:[],
				contractId:undefined,
			}
		},
		onLoad() {
			// 修改顶部导航背景色
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#39b54a',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		},
		methods: {
			getMoneys(contractId){
				this.contractId=contractId;
				 
				var data = {contractId:this.contractId};
				var that=this;
				api.getContractMoney(data).then(
					res => {
						if(res.code==200){
							that.list=res.list;
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
							 
						}
					},
					rej => {}
				);
			},
			addMoney(){
				uni.navigateTo({
					url: 'addMoney?contractId='+this.contractId,
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		background: #fff;
		.rela-modul{
			margin-bottom: 20upx;
			.head{
				padding: 20upx 30upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #f7f7f7;
				.left{
					display: flex;
					align-items: center;
					.img{
						width: 40upx;
						height: 40upx;
						margin-right: 20upx;
					}
					.text{
						font-size: 30upx;
						color: #333;
					}
				}
				.right{
					display: flex;
					align-items: center;
					.img{
						width: 30upx;
						height: 30upx;
						margin-right: 20upx;
					}
					.text{
						font-size: 30upx;
						color: #39b54a;
					}
				}
			}
			// 联系人
			.contact-list{
				padding: 0 30upx;
				.item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20upx 0;
					border-bottom: 1px solid #f7f7f7;
					&:last-child{
						border-bottom: none;
					}
					.left{
						display: flex;
						flex-direction: column;
						.name{
							font-size: 32upx;
							color: #333;
							margin-bottom: 20upx;
						}
						.phone{
							font-size: 28upx;
							color: #999;
						}
					}
					.img{
						width: 60upx;
						height: 60upx;
					}
				}
			}
			// 相关团队
			.team-list{
				padding: 0 30upx;
				.item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20upx 0;
					border-bottom: 1px solid #f7f7f7;
					&:last-child{
						border-bottom: none;
					}
					.left{
						display: flex;
						align-items: center;
						.head-box{
							width: 80upx;
							height: 80upx;
							line-height: 80upx;
							border-radius: 50%;
							background: #0aAC44;
							font-size: 28upx;
							color: #fff;
							text-align: center;
							margin-right: 20upx;
							.img{
								width: 100%;
								height: 100%;
							}
						}
						.info{
							height: 60upx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							.name{
								font-size: 28upx;
								line-height: 1;
								color: #000;
							}
							.title{
								font-size: 24upx;
								line-height: 1;
								color: #666;
							}
						}
					}
					.right{
						height: 80upx;
						.text{
							font-size: 28upx;
							color: #999;
						}
					}
				}
			}
			// 合同
			.contract-list{
				padding: 0 30upx;
				.item{
					padding: 20upx 0;
					border-bottom: 1px solid #f7f7f7;
					line-height: 1.6;
					&:last-child{
						border-bottom: none;
					}
					.name{
						font-size: 32upx;
						color: #000;
					}
					.num{
						font-size: 28upx;
						color: #999;
					}
					.rate{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							width: 90%;
							display: flex;
							align-items: center;
							.text{
								font-size: 28upx;
								color: #999;
							}
							.progress-box{
								display: flex;
								width: 60%;
								margin-left: 20upx;
							}
						}
						.money{
							font-size: 32upx;
							color: #E6A23C;
							font-weight: bold;
						}
					}
					.status{
						font-size: 32upx;
						color: #2172FF;
					}
				}
			}
		}
	}
</style>
